<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <!-- 响应式-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.4/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/lib/css/me.css">
    <title>分类管理</title>
</head>
<body>
<!--导航-->
<nav th:replace="admin/_fragments :: menu(2)"></nav>
<div class="ui attached menu">
    <div class="ui right aligned container">
        <div class="menu right">
            <a th:href="@{/admin/type/input}" class="item">新增</a>
            <a th:href="@{/admin/types}" class="item active">列表
            </a>
        </div>
    </div>
</div>
<!--中间部分-->
<div class="m-container-small m-padded-tb-large">
    <div class="ui container">
        <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
            <i class="close icon"></i>
            <div class="header">提示：</div>
            <p th:text="${message}">恭喜，操作成功！</p>
        </div>
        <table class="ui celled table">
            <thead class="center aligned">
            <tr>
                <th></th>
                <th>名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="center aligned" >

            <tr th:each="type,iterStat : ${page.content}">
                <td th:text="${iterStat.count}">1</td>
                <td th:text="${type.name}">刻意练习清单</td>
                <td>
                    <a href="#" th:href="@{/admin/types/{id}/input(id=${type.id})}" class="ui mini teal basic button">编辑</a>
                    <a href="#" th:href="@{/admin/types/{id}/delete(id=${type.id})}" class="ui mini red basic button">删除</a>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="6">
                    <div class="ui  mini  pagination menu" th:if="${page.totalPages>1}">
                        <a th:href="@{/admin/types(page=${page.number}-1)}"  class="item" th:unless="${page.first}">上一页</a>
                        <a th:href="@{/admin/types(page=${page.number}+1)}"  class="item" th:unless="${page.last}">下一页</a>
                    </div>
                    <a th:href="@{/admin/type/input}" class="teal ui button basic right floated m-margin-right">新增</a>
                </th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

<!--尾部-->
<footer th:replace="admin/_fragments :: footer" ></footer>

<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<script>

    $('.menu.toggle').click(
        function () {
            $('.m-item').toggleClass('m-mobile-hide');
        }
    );
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
    /*消息关闭初始化*/
    $('.message .close')
        .on('click',function () {
            $(this)
                .closest('.message')
                .transition('fade');
        });

</script>
</body>
</html>